<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式</title>
    <link rel="stylesheet" href="./css/base.css" />
</head>

<style>
    /* id选择器格式  */
    /* # id值{属性：值;....N} */
    #squar {
        background-color: aqua;
        width: 100px;
        height: 100px;
    }

    /* 样式选择器 class选择器 class=样式名称 不会自动生效  */
    /* .样式名称{属性：值;....N} */
    .inputstyle {
        height: 25px;
        width: 100px;
        border: 1px solid red;
    }

    /* 元素选择器  标签选择器  */
    /* tagName{属性：值;....N} */
    input {
        height: 25px;
        width: 100px;
        background-color: rgb(39, 122, 195);
    }

    /* 层级 */

</style>

<body>
    <h1>功能</h1>
    <strong>是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。</strong>
    css 不单独存在，要HTML 文档或 XML,大量css存在html里面了
    <h2>分布位置\分类</h2>
    <ul>
        <li>分类</li>
        <ol>
            <li>内嵌样式</li>
            <li>内部样式</li>
            <li>外部样式</li>
        </ol>
        <li>分布位置</li>
        <ol>
            <li> &lt;style &gt; 块内部 &lt;style &gt; 可以放到任何位置 ： 内部样式 </li>
            <!-- 
                1 : head 与body    强列建议的
                2 : body 里面没有问题
                3 : 内容元素 的文本区域
             -->
            <li> 元素标签 style属性里面 : 它就是内嵌样式 </li>
            <li>外部的*.css文件里面 ： 外部样式</li>
        </ol>
    </ul>
    <h3>内嵌样式案例</h3>

    <input type="text" style="
        border-top: 0ch;
        border-left: 0ch;
        border-right: 0ch;
        border-bottom: 1px solid black;
    ">

    <h3>内部样式案例</h3>
    <strong>
        风嵌缺点
        1 ： 不通用
        2 : 混乱，分离 html css在一起了
        3 : "" 里面写代码...
    </strong>

    <h4>格式</h4>
    &lt;style &gt;
    选择器{
    属性名称 ： 属性值 属性值 属性值 属性值 ;
    属性名称 ： 属性值;
    属性名称 ： 属性值;.....
    }
    &lt;/style &gt;

    <h4>选择器</h4>
    <strong>用来选取页面当中元素的方式，声明哪些元素，会采用当前样式</strong>

    <h5>id选择器</h5>
    <strong>id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。</strong>
    <div id="squar"></div>
    <input type="text">
    <input type="date" name="" id="">
    <input type="checkbox" name="" id="">
    <input type="file" name="" id="">
    <h3>外部样式</h3>
    <strong>
        内部样式的缺点:
            1 : 分离不够明确
            2 ： 通用不过清晰
    </strong>
    在html外面，新建一个css文件夹，在里面创建你要的文件 base.css 你可以在里面编写大量的css
    在html里面要先引后用，在head里面添加引入代码&lt;link rel="stylesheet" href=""&gt;
    <div></div>
    <div></div>
</body>

</html>